﻿@page "/datagrid/grid-dialog-template"

@using Syncfusion.Blazor.Grids
@using Syncfusion.Blazor.Calendars
@using Syncfusion.Blazor.DropDowns
@using Syncfusion.Blazor.Inputs
@using Syncfusion.Blazor.Popups
@using BlazorDemos
@using blazor_griddata
@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample demonstrates CRUD operations in DataGrid. You can perform CRUD operations as follows,</p>
    <ul>
       <li><strong>Add</strong> -  To add new record, click Add toolbar button. </li>
       <li><strong>Edit</strong> - To edit record, double click a row or click toolbar Edit button after selecting a row. </li>
       <li><strong>Delete</strong> - To delete record, click toolbar Delete button after selecting a row. </li>
        <li><strong>Update</strong>,<strong>Cancel</strong> - You can save or discard changes by clicking the toolbar Update and Cancel button respectively.</li>
    </ul>.
</SampleDescription>
<ActionDescription>
    <p>The DataGrid supports CRUD operations. These CRUD operations can be configured in DataGrid using the <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.Grids.GridEditSettings.html'>GridEditSettings</a></code> component.</p>
    <p>In this demo, Dialog template is enabled for editing by defining <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_Mode'>Mode</a></code> as <strong>Dialog</strong> in the <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.Grids.GridEditSettings.html'>GridEditSettings</a></code> component. You can use the <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_Template'>Template</a></code> component. property of the <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor~Syncfusion.Blazor.Grids.GridEditSettings.html'>GridEditSettings</a></code> component to render the custom Dialog.</p>
    <p>More information on the dialog template editing can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/grid/editing/#dialog-template'>documentation section</a>.</p>
    <p>You can refer to our <a target='_blank' href='https://www.syncfusion.com/blazor-components/blazor-datagrid/editing'>Blazor Editable Grid</a> page to know more about editing and its feature representations. </p>
</ActionDescription>

<div class="col-lg-12 control-section">
    <div class="content-wrapper">
        <div class="row">
            <SfGrid DataSource="@GridData" AllowPaging="true" Toolbar="@(new string[] {"Add", "Edit" ,"Delete","Update","Cancel" })">
                <GridEvents OnActionComplete="ActionCompleteHandler" TValue="OrdersDetails"></GridEvents>
                <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="@EditMode.Dialog" Dialog="DialogParams">
                    <Template>
                        @{
                            var Order = (context as OrdersDetails);
                        }
                        <div>
                            <div class="form-row">
                                <div class="form-group col-md-6">
                                    <SfNumericTextBox ID="OrderID" @bind-Value="@(Order.OrderID)" Enabled="@Check" FloatLabelType="FloatLabelType.Always" Placeholder="Order ID"></SfNumericTextBox>
                                </div>
                                <div class="form-group col-md-6">
                                    <SfAutoComplete TItem="OrdersDetails" ID="CustomerID" @bind-Value="@(Order.CustomerID)" TValue="string" DataSource="@GridData" FloatLabelType="FloatLabelType.Always" Placeholder="Customer Name">
                                        <AutoCompleteFieldSettings Value="CustomerID"></AutoCompleteFieldSettings>
                                    </SfAutoComplete>
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="form-group col-md-6">
                                    <SfNumericTextBox ID="Freight" @bind-Value="@(Order.Freight)" TValue="double?" FloatLabelType="FloatLabelType.Always" Placeholder="Freight"></SfNumericTextBox>
                                </div>
                                <div class="form-group col-md-6">
                                    <SfDatePicker ID="OrderDate" @bind-Value="@(Order.OrderDate)" FloatLabelType="FloatLabelType.Always" Placeholder="Order Date">
                                    </SfDatePicker>
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="form-group col-md-6">
                                    <SfDropDownList ID="ShipCountry" TItem="OrdersDetails" @bind-Value="@(Order.ShipCountry)" TValue="string" DataSource="@GridData" FloatLabelType="FloatLabelType.Always" Placeholder="Ship Country">
                                        <DropDownListFieldSettings Value="ShipCountry" Text="ShipCountry"></DropDownListFieldSettings>
                                    </SfDropDownList>
                                </div>
                                <div class="form-group col-md-6">
                                    <SfDropDownList ID="ShipCity" TItem="OrdersDetails" @bind-Value="@(Order.ShipCity)" TValue="string" DataSource="@GridData" FloatLabelType="FloatLabelType.Always" Placeholder="Ship City">
                                        <DropDownListFieldSettings Value="ShipCity" Text="ShipCity"></DropDownListFieldSettings>
                                    </SfDropDownList>
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="form-group col-md-12">
                                    <SfTextBox ID="ShipAddress" @bind-Value="@(Order.ShipAddress)" FloatLabelType="FloatLabelType.Always" Placeholder="Ship Address"></SfTextBox>
                                </div>
                            </div>
                        </div>
                    </Template>
                </GridEditSettings>
                <GridColumns>
                    <GridColumn Field=@nameof(OrdersDetails.OrderID) HeaderText="Order ID" IsPrimaryKey="true" ValidationRules="@(new ValidationRules{ Required=true, Number=true})" TextAlign="@TextAlign.Center" HeaderTextAlign="@TextAlign.Center" Width="140"></GridColumn>
                    <GridColumn Field=@nameof(OrdersDetails.CustomerID) HeaderText="Customer Name" ValidationRules="@(new ValidationRules{ Required=true})" Width="150"></GridColumn>
                    <GridColumn Field=@nameof(OrdersDetails.Freight) HeaderText="Freight" Format="C2" Width="140" TextAlign="@TextAlign.Right" ValidationRules="@(new ValidationRules{ Required=true, Range = new double[]{1, 1000}})" HeaderTextAlign="@TextAlign.Right"></GridColumn>
                    <GridColumn Field=@nameof(OrdersDetails.OrderDate) HeaderText="Order Date" Format="d" TextAlign="TextAlign.Right" Type="ColumnType.Date" Width="160"></GridColumn>
                    <GridColumn Field=@nameof(OrdersDetails.ShipCountry) HeaderText="Ship Country" Width="150"></GridColumn>
                </GridColumns>
            </SfGrid>
        </div>
    </div>
</div>

@code{

    public List<OrdersDetails> GridData { get; set; }

    private Boolean Check = false;

    private DialogSettings DialogParams = new DialogSettings { MinHeight = "400px", Width = "450px" };

    protected override void OnInitialized()
    {
        GridData = OrdersDetails.GetAllRecords();
    }
    public void ActionCompleteHandler(ActionEventArgs<OrdersDetails> args)
    {
        if (args.RequestType.ToString() == "Add")
        {
            Check = true;
        }
        else
        {
            Check = false;
        }
    }
}

